<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <style>
        .list-enter-active,
        .list-leave-active {
            transition: all 1s;
        }

        .list-enter,
        .list-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }
    </style>
</head>

<body>
    <div id="app">
        <header>
            <div class="logo"><img src="./img/logo.png" alt=""></div>
        </header>
        <main>
            <div class="inputSearch clearfix">
                <input type="text" class="fl" placeholder="请输入查询的天气" v-model="cityName"
                    @keyup.enter="searchWeather(cityName)">
                <a class="search fr" @click.prevent="searchWeather(cityName)"><img v-show="isLoading"
                        src="./img/loading.gif">搜索</a>
                <div class="commonCity">
                    <a @click.prevent="searchWeather('北京')">北京</a>
                    <a @click.prevent="searchWeather('西安')">西安</a>
                    <a @click.prevent="searchWeather('哈尔滨')">哈尔滨</a>
                    <a @click.prevent="searchWeather('深圳')">深圳</a>
                </div>
            </div>
            <div class="showWeather">
                <transition-group class="weatherList" tag="ul" name="list">
                    <li class="cityWea" v-for="(item,index) in weatherList" :key="'weather'+index"
                        :style="{transitionDelay:index*100+'ms'}">
                        <!-- 晴 -->
                        <span class="iconfont icon-weatherpartlycloudy" v-if="item.type.indexOf('晴') > -1"></span>
                        <!-- 阴 -->
                        <span class="iconfont icon-weatherfog" v-if="item.type.indexOf('阴') > -1"></span>
                        <!-- 雪 -->
                        <span class="iconfont icon-weathersnowy" v-if="item.type.indexOf('雪') > -1"></span>
                        <!-- 云 -->
                        <span class="iconfont icon-weather-cloudy" v-if="item.type.indexOf('云') > -1"></span>
                        <!-- 雷 -->
                        <span class="iconfont icon-weatherlightning" v-if="item.type.indexOf('雷') > -1"></span>
                        <!-- 雨 -->
                        <span class="iconfont icon-weather-rainy" v-if="item.type.indexOf('雨') > -1"></span>
                        <!-- 霾 -->
                        <span class="iconfont icon-weatherwindyvariant" v-if="item.type.indexOf('霾') > -1"></span>
                        <div class="highTemp">{{item.high.split(' ')[0][0]}}<b class="high">{{item.high.split(' ')[1]}}</b></div>
                        <div class="lowTemp">{{item.low}}
                        </div>
                        <div class="days clearfix">
                            <div class="fl weaDate"><strong>{{item.date}}</strong></div>
                            <div class="fr weaType">{{item.type}}</div>
                        </div>

                    </li>

                </transition-group>
            </div>
        </main>

    </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<script>
    new Vue({
        // 绑定页面中id为app的元素
        el: "#app",
        data: {
            // cityName 为用户的输入城市，使用v-model进行数据双向绑定
            // weatherList 用来保存获取到的天气列表
            // isLoading 用来表示加载栏 gif图片的显示与否，当用户点击搜索之后就将其设置为true，该加载图片就显示
            cityName: "",
            weatherList: [],
            isLoading: false
        },
        methods: {
            // 传入的city参数
            async searchWeather(city) {
                // 当用户点击搜索或者按下回车之后将 加载图片的状态置为true，开始显示加载状态
                this.isLoading = true;
                // 当用户没有输入也没有点击常用城市时才会弹出提示
                if (!city && !this.cityName) {
                    alert('请输入城市名称');
                    // 当弹出提示后则说明用户的输入有误，则此时对加载图片的状态进行更改
                    this.isLoading = false
                    return
                }
                // 将数组清空,数组清空的常用方法
                // this.weatherList=[];  this.weatherList.splice(0);  this.weatherList.length=0
                this.weatherList.splice(0);
                // 当有输入时，将用户的input框输入或者是电机的的常用城市进行保存为myCity
                let myCity = city ? city : this.cityName;
                // axios请求
                let resp = await axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + myCity)
                // 如果能够成功获取到数据，则将数据进行保存到weatherList列表中
                if (resp.data.desc === "OK") {
                    let dataList = resp.data.data.forecast;
                    console.log(dataList);
                    let timerId = setTimeout(() => {
                        this.weatherList = dataList;

                    }, 500);
                } else {
                    alert("城市输入不合法")
                }
                // 之后便将输入框置空 以及 加载图片的状态置为false
                this.cityName = ""
                this.isLoading = false

            }
        }
    })
</script>

</html>